import { computed, ref } from 'vue';
import { searchWorkUserListByName } from '@/api/dataCenter/customerGroupAnalysis/customerGroupData';
import { getDay } from '@/utils/utils';

/** 选择统计时间的类型 */
const timeType = ref(4);

/* ----------------------------禁用时间-start---------------------------- */
// 当前点击的时间
const pickDay = ref();
// 上线时间为： 2023年7月12日, 7.10日之后可以选
const ONLINE_TIME = new Date(2023, 6, 10);
/** 一天的时间戳 */
const ONE_DAY_TIME = 86400000;
// 时间范围： 7.11日之后可以选， 90天范围, 当天不可选
const disabledDate = (time: any) => {
    if (!pickDay.value) {
        return time.getTime() >= Date.now() - ONE_DAY_TIME || time.getTime() <= ONLINE_TIME;
    }
    const con1 = new Date(pickDay.value).getTime() - 89 * ONE_DAY_TIME;
    const con2 = new Date(pickDay.value).getTime() + 89 * ONE_DAY_TIME;
    // 时间区间的禁用
    const rangeDisabel = time.getTime() < con1 || time.getTime() > con2;

    // 时间区间的禁用 || 不能小于上线的日期 || 不能是今天
    return rangeDisabel || time.getTime() <= ONLINE_TIME || time.getTime() >= Date.now() - ONE_DAY_TIME;
};
// 点击时间区域的事件
const calendarChange = (val: Date[]) => {
    const [pointDay] = val;
    pickDay.value = pointDay;
};
/* ----------------------------禁用时间-end---------------------------- */

/** 时间统计的列 */
const timeColunms = [
    {
        label: '统计时间',
        name: 'filter_time_type',
        clearable: false,
        value: 4,
        type: 'select',
        placeholder: '请选择统计时间',
        optionList: [
            { label: '今日', value: 2 },
            { label: '昨日', value: 3 },
            { label: '近7天(不包含今日)', value: 4 },
            { label: '近30天(不包含今日)', value: 5 },
            { label: '自定义统计时间', value: 1 }
        ],
        change: (value: number, form: any) => {
            timeType.value = value;
            let filterTime: any[] = [];
            switch (value) {
                case 1:
                    // 自定义
                    filterTime = [];
                    break;
                case 2:
                    // 今日
                    filterTime = [getDay(0), getDay(0, true)];
                    break;
                case 3:
                    // 昨日
                    filterTime = [getDay(-1), getDay(-1, true)];
                    break;
                case 4:
                    // 近7天
                    filterTime = [getDay(-7), getDay(-1, true)];
                    break;
                case 5:
                    // 近30天
                    filterTime = [getDay(-30), getDay(-1, true)];
                    break;
            }
            form.filter_time = filterTime;
        }
    },
    {
        label: '统计时间',
        name: 'filter_time',
        isRender: (form: any) => {
            return form.filter_time_type === 1;
        },
        clearable: false,
        value: [],
        type: 'datePicker',
        datePickerType: 'daterange',
        datePickerFormat: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期',
        disabledDate: disabledDate,
        calendarChange: calendarChange
    }
];

/**
 * 按员工查询列配置
 */
const workColunms = [
    {
        label: '员工名称',
        name: 'work_user_ids',
        value: [],
        type: 'selectV2',
        placeholder: '请输入员工名称',
        multiple: true,
        collapseTags: true,
        filterable: true,
        remote: true,
        fetchOptionApi: (keyword: string) => {
            return new Promise(resolve => {
                searchWorkUserListByName({ keyword }).then((res: any[]) => {
                    const list = res.map((item: any) => ({
                        value: item.id,
                        label: item.name
                    }));
                    resolve(list);
                });
            });
        }
    },
    {
        label: '员工角色',
        name: 'groupchat_role_type',
        value: '',
        type: 'select',
        placeholder: '请选择员工角色',
        optionList: [
            { label: '群主', value: 1 },
            { label: '群成员', value: 2 }
        ]
    }
];

/**
 * 页面展示的按员工查询列配置
 */
export const workUserColunms = computed(() => {
    return [...timeColunms, ...workColunms];
});

/**
 * 按群聊查询列配置
 */
const groupColunms = [
    {
        label: '群名称',
        name: 'groupchat_name',
        value: '',
        type: 'input',
        placeholder: '请输入群名称'
    },
    {
        ...workColunms.find(item => item.name === 'work_user_ids'),
        name: 'owner_work_user_ids',
        label: '群主名称',
        placeholder: '请输入群主名称'
    },
    {
        label: '建群时间',
        name: 'create_groupchat_time',
        value: [],
        type: 'datePicker',
        datePickerType: 'daterange',
        datePickerFormat: 'YYYY-MM-DD',
        valueFormat: 'YYYY-MM-DD HH:mm:ss',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
    }
];
/**
 * 页面展示的按群聊查询列配置
 */
export const groupChatColunms = computed(() => {
    return [...timeColunms, ...groupColunms];
});

/**
 * 按日期查询列的禁用时间
 * @param time 当前时间
 * @returns boolean
 */
const dateColunmsDisabledDate = (time: any) => {
    return time.getTime() >= Date.now() - ONE_DAY_TIME || time.getTime() <= ONLINE_TIME;
};
/**
 * 页面展示的按日期查询列配置
 * @description 这里用value包起来的原因是在index.vue页面中使用的是.value取值
 */
export const dateColunms = {
    value: [
        {
            ...timeColunms[1],
            isRender: undefined,
            disabledDate: dateColunmsDisabledDate,
            calendarChange: undefined,
            label: '日期'
        }
    ]
};
